<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>查询消费记录</title>
    <!-- 采用绝对路径导入css文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css"/>
    <!-- 采用绝对路径导入jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //验证非空，并提交查询请求
            $("#submit").click(function () {
                //验证输入框是否为空
                let keyword = $("#keyword").val();
                if (keyword === "") {
                    alert("请输入关键字");
                    return false;
                } else {
                    //javascript语言提供了一个location地址栏对象
                    //它有一个属性href,可以获取浏览器中地址栏地址
                    location.href = "${pageContext.request.contextPath }/manager/homeCostServlet?action=pageByKeyword&pageSize=4&pageNo=1&keyword=" + keyword;
                }
            });
            //删除提示
            $("a.deleteClass").click(function () {
                //在事件fuction函数中有一个this对象，即当前响应事件的dom对象
                return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() + "】?");
            });

            if("${sessionScope.user.privilege}"==="2"){
                $("#user-manager").attr("hidden","hidden")
            }

            $("#cost-manager").click(function () {
                location.href = "${pageContext.request.contextPath }/manager/homeCostServlet?action=page&pageSize=4&pageNo=1"
            })

            $("#user-manager").click(function () {
                location.href = "${pageContext.request.contextPath }/manager/userServlet?action=page&pageSize=4&pageNo=1"
            })

            $("#logout").click(function () {
                if(confirm("你确定要退出登录?")){
                    location.href="${pageContext.request.contextPath}/manager/userServlet?action=logout"
                }
            })
            $("#user-info").click(function () {
                location.href = "${pageContext.request.contextPath }/manager/userServlet?action=info&user_id=${sessionScope.user.id}"
            })

            $("#update-password").click(function () {
                location.href = "${pageContext.request.contextPath}/pages/update_password.jsp?user_id=${sessionScope.user.id}"
            })

        });
    </script>
    <style>
        .portrait::before{
            background-image: url("${pageContext.request.contextPath }${sessionScope.user.face_path}");
        }
    </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
          d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div id="header">

    <span class="wel_word">查询消费记录</span>
    <div style="float: right">
        <a style="font-size: 15px;margin-right: 10px" class="btn btn-primary head-btn" href="${pageContext.request.contextPath }/manager/homeCostServlet?action=page&pageSize=4&pageNo=1" >返回消费记录</a>
        <a style="font-size: 15px" class="btn btn-primary head-btn" href="${pageContext.request.contextPath }/pages/cost_edit.jsp">新增消费记录</a>
        <input style="margin-left:20px" id="keyword" name="keyword" type="text" class="head-btn" placeholder="请输入关键字" value=""/>
        <input id="submit" type="submit" class="btn btn-primary mb-3 head-btn" value="查询"/>
        <li class="portrait" style="transform: translate(450px,-50px)">
            <ul class="information">
                <li id="cost-manager">消费记录</li>
                <li id="user-info">个人信息</li>
                <li id="update-password">修改密码</li>
                <li id="user-manager">用户管理</li>
                <li id="logout">退出登录</li>
            </ul>
        </li>
    </div>
</div>

<div id="main">
        <table class="hover">
            <thead>
            <tr>
                <th class="costname" style="width:200px">消费名称</th>
                <th>创建人</th>
                <th>消费金额</th>
                <th style="width:200px">登记日期</th>
                <th colspan="2">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:set var="count" value="0" scope="page"/>
            <c:forEach items="${requestScope.page.items}" var="item">
                <c:set var="count" value="${count+1}" scope="page"/>
                <tr>
                    <td>${item.costName}</td>
                    <td>${item.name}</td>
                    <td>${item.money}</td>
                    <td>${item.date}</td>
                    <td class="change">

                        <a role="button" class="new btn btn-primary btn-lg"
                           href="${pageContext.request.contextPath }/manager/homeCostServlet?action=getHomeCostById&id=${item.id}">详情</a>
                    </td>
                    <td class="deleteClass">

                        <a role="button" class="deleteClass btn btn-primary btn-lg"
                           href="${pageContext.request.contextPath }/manager/homeCostServlet?action=delete&id=${item.id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
            <c:forEach begin="1" end="${4-count<0?0:4-count}">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="change">

                    </td>
                    <td class="deleteClass">

                    </td>
                </tr>
            </c:forEach>
            </tbody>
            <tfoot>
            <td colspan="6">
                <%@include file="/pages/page_bar.jsp" %>
            </td>
            </tfoot>
        </table>
</div>
</body>
</html>